<template>
	<view>
		<view class="business">
			<view class="business-line"></view>
			<view class="business-title">
				<text> 旗下场馆 </text>
			</view>
			<navigator class="news-list-more" url="../../page_venues/venuesList/venuesList">
				<text>更多</text>
				<u-icon name="arrow-right" :customStyle="{ color: 'rgb(190,190,190) !important' }" :bold="true">
				</u-icon>
			</navigator>
		</view>
		<!-- 三个子场馆以上 style 3-->
		<scroll-view class="footer-3" scroll-x style="margin-top: 20rpx;padding: 10rpx 10rpx 10rpx 0rpx;"
			v-if="detailstyle == 3">
			<view class="flex-align">
				<view v-for="(im,indexx) in detaillist" :key="indexx" style="margin-left: 20rpx;"
					@click="StoreDetaillist(im)">
	
					<view class="" style="width: 100%;height: 140rpx;">
						<image style="width:223.78rpx;height: 130rpx;border-radius: 10rpx;"
							:src="im.venue_thumb" mode=""></image>
					</view>
					<view
						style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;font-size: 24rpx;line-height: 33rpx;text-align: center;margin-top: 10rpx;color: #333333;">
						{{im.venue_name}}
					</view>
					<view
						style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;font-size: 24rpx;line-height: 33rpx;text-align: center;margin-top: 10rpx;color: #333333;">
						{{im.open_time}}
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 两个子场馆以上  style 2-->
		<view class="footer-3" style="margin-top: 20rpx;padding: 10rpx 10rpx 10rpx 0rpx;"
			v-if="detailstyle == 2">
			<view class="flex-align">
				<view v-for="(im,indexx) in detaillist.slice(0,2)" :key="indexx" style="margin-left: 30rpx;"
					@click="StoreDetaillist(im)">
	
					<view class="" style="width: 100%;height: 140rpx;">
						<image style="width:332rpx;height: 212rpx;border-radius: 10rpx;" :src="im.venue_thumb"
							mode=""></image>
					</view>
					<view
						style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;font-size: 24rpx;line-height: 33rpx;text-align: center;margin-top: 90rpx;color: #333333;">
						{{im.venue_name}}
					</view>
					<view
						style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;font-size: 24rpx;line-height: 33rpx;text-align: center;margin-top: 10rpx;color: #333333;">
						{{im.open_time}}
					</view>
				</view>
			</view>
		</view>
		<!-- 一个子场馆以上  style 1-->
		<view class="footer-3" style="margin-top: 20rpx;padding: 10rpx 10rpx 10rpx 0rpx;"
			v-if="detailstyle== 1">
			<view class="flex-align">
				<view v-for="(im,indexx) in detaillist.slice(0,1)" :key="indexx" style="margin-left: 30rpx;"
					@click="StoreDetaillist(im)">
	
					<view class="" style="width: 100%;height: 140rpx;">
						<image style="width:690rpx;height: 270rpx;border-radius: 10rpx;" :src="im.venue_thumb"
							mode=""></image>
					</view>
					<view
						style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;font-size: 24rpx;line-height: 33rpx;text-align: center;margin-top: 150rpx;color: #333333;">
						{{im.venue_name}}
					</view>
					<view
						style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;font-size: 24rpx;line-height: 33rpx;text-align: center;margin-top: 10rpx;color: #333333;">
						{{im.open_time}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {


			}
		},
		props: {
			detaillist: {
				type: Array,
				default: () => ({})
			},
			detailstyle: {
				type: String,
				required: true
			}
			
		},
		methods: {
			StoreDetaillist(){
				uni.navigateTo({
					url:'../../page_venues/storeDetail/storeDetail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("@/static/css/index/index.css");
</style>